<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script type="text/javascript">
	$(document).ready(function() {
		$("#mytable").dataTable();

	});
</script>
<style>
	.form-control {
		width: 40%;
	}
</style>
<div id="content-outer">
	<!-- start content -->
	<div id="content">

		<!--  start page-heading -->
		<table border="0" width="100%" cellpadding="0" cellspacing="0"
			id="content-table">
			<tr>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowleft.jpg" width="20" height="300"
					alt="" /></th>
				<th class="topleft"></th>
				<td id="tbl-border-top">&nbsp;</td>
				<th class="topright"></th>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowright.jpg" width="20" height="300"
					alt="" /></th>
			</tr>
			<tr>
				<td id="tbl-border-left"></td>
				<td>
					<div id="content-table-inner">
						<div id="content-table-inner" style="padding-left: 35px;">
							<table border="0" width="100%" cellpadding="0" cellspacing="0">
								<tr valign="top">
									<td>
										<form action="login" method="post">
											<div class="form-group">
												<label>User Name</label> <input type="text"
													class="form-control" id="userName" name="username"
													placeholder="User Name" required="required">

											</div>
											<div class="form-group">
												<label>Password</label> 
												<input type="password" class="form-control" name="password"
													placeholder="Password" required="required">
											</div>
											<button type="submit" class="btn btn-default">Login</button>
											
										</form>
										<a href="register">Create a new account</a><br/>
										<span style="color: red">${error }</span>
									</td>
									
								</tr>
							</table>
						</div>
				</td>
				<td id="tbl-border-right"></td>
			</tr>
			<tr>
				<th class="sized bottomleft"></th>
				<td id="tbl-border-bottom">&nbsp;</td>
				<th class="sized bottomright"></th>
			</tr>
		</table>
		<br />
	</div>
	<div class="clear">&nbsp;</div>
</div>